<template>
    <div class="page-content">
        <div class="d-flex">
            <edit-tree
                v-model="currentCategory"
                apiPrefix="/manager/device-model-category"
                :newFields="categoryFields"
                class="tree mr-4"
                @currentChange="selectCategory"
                title="模型"
            ></edit-tree>

            <entity-manager
                apiPrefix="/manager/device-model"
                :fields="fields"
                :queryFields="queryFields"
                ref="entityManagerRef"
                class="flex-auto"
                :params="params"
                :withNew="false"
                operationsWidth="200px"
            >
                <template #buttons>
                    <el-button type="primary" icon="plus" @click="newItem">新增</el-button>
                    <!-- <el-button type="primary" @click="showImport">导入</el-button> -->
                </template>

                <template #rowButtons="{ row }">
                    <el-link type="danger" v-show="row.status == 1 || row.status == 2" class="mr-2" @click="offline(row)" v-perm="'update'">下线</el-link>
                    <el-link type="success" v-show="row.status == 0 || row.status == 3 || row.status == 2" class="mr-2" @click="publish(row)" v-perm="'update'"
                        >发布</el-link
                    >
                    <el-link type="primary" v-show="!row.isSuperAdmin" @click="goEdit(row)" class="mr-2" v-perm="'update'">详情</el-link>
                    <el-link type="danger" v-show="!row.isSuperAdmin" @click="doDelete(row)" class="mr-2" v-perm="'delete'">删除</el-link>
                </template>
            </entity-manager>
        </div>

        <full-panel v-model="visible" title="模型详情" @close="visible = false" v-if="visible">
            <new-model @close="visible = false" :item="editingRow" :category="currentCategory" @change="editChanged" />
        </full-panel>

        <el-dialog v-model="importVisible" title="模型导入">
            <ImportData />
        </el-dialog>
    </div>
</template>

<script setup>
import EditTree from "@/components/edit-tree/index.vue";
import { ElMessage } from "element-plus";
import fullPanel from "@/components/full-panel.vue";
import newModel from "./new.vue";
import * as _ from "lodash";
import https from "@/utils/https";
import ImportData from "./import-data.vue";

const categoryFields = [{ label: "分类名称", prop: "name", required: true }];
const fields = [
    { label: "模型名称", prop: "name", required: true, width: "200px" },
    {
        label: "状态",
        prop: "status",
        width: "80px",
        converter: (val) => {
            if (!val) {
                return "草稿";
            } else if (val == 1) {
                return "已发布";
            } else if (val == 2) {
                return "编辑中";
            } else {
                return "已下线";
            }
        },
        needNew: false,
    },
    { label: "离线检测周期（S）", prop: "offlineDetection", width: "140px", default: 60 },
    { label: "备注", prop: "remark", type: "textarea" },
    { label: "创建时间", prop: "createTime", width: "200px", needNew: false },
];
const entityManagerRef = ref();
const params = ref({});
const queryFields = [{ label: "模型名称", prop: "name" }];
const visible = ref(false);
const editingRow = ref();
const currentCategory = ref({});

function goEdit(row) {
    editingRow.value = row;
    visible.value = true;
}

function doDelete(row) {
    entityManagerRef.value.doDelete(row);
}

function editChanged() {
    editingRow.value.status = 2;
}

function publish(row) {
    https.get("/manager/device-model/publish", { id: row.id }).then((resp) => {
        ElMessage.success("操作成功");
        row.status = 1;
    });
}

function offline(row) {
    https.get("/manager/device-model/offline", { id: row.id }).then((resp) => {
        ElMessage.success("操作成功");
        row.status = 3;
    });
}

function selectCategory(category) {
    params.value.categoryId = category.id;
    entityManagerRef.value.reload();
}

function newItem() {
    editingRow.value = null;
    visible.value = true;
}

const importVisible = ref(false);
function showImport() {
    importVisible.value = true;
}
</script>

<style lang="scss" scoped>
.tree {
    width: 300px;
    height: calc(100vh - 80px);
}
</style>
